<template>
  <div id="mine">
      <div style="height: 135px;width: 100%;background-color: #fcfffc">
        <!--   标题       -->
<!--        <div style="display: flex;justify-content: center;align-content: center;">-->
<!--            <div style="margin-top: 10px">-->
<!--                <span style="color: #F5F5F5;">个人中心</span>-->
<!--            </div>-->
<!--        </div>-->
<!--          <van-nav-bar-->
<!--                  title="个人中心"-->

<!--                  @click-right="onClickRight"-->
<!--          />-->

          <van-nav-bar title="个人中心"  @click-right="onClickRight" >
              <template #right>
                  <van-icon name="setting-o"/>
              </template>
          </van-nav-bar>




        <!--    头像及其他信息      -->
        <div style="display: flex;margin-top: 10px">
            <div style="margin-left: 10px">
                <router-link tag="div" :to="{path:'/dashboard/mine/myInfo',
                query:{
                            headImage:this.user.headImage,
                            userName:this.user.userName,
                            account:this.user.account,
                            phone:this.user.phone,
                            email:this.user.email,
                            auth:this.user.auth,
                            score:this.user.score,
                            sex:this.user.sex
                }}">
                    <van-image
                            round
                            width="4rem"
                            height="4rem"
                            :src="(user.headImage === null )? require('./images/cat.jpeg'):baseURL1+user.headImage"
                    />
                </router-link>

            </div>


            <div style="margin-left: 20px;margin-top: auto;margin-bottom: auto">

                        <router-link tag="div" :to="{path:'/dashboard/mine/myInfo',
                query:{
                            headImage:this.user.headImage,
                            userName:this.user.userName,
                            account:this.user.account,
                            phone:this.user.phone,
                            email:this.user.email,
                            auth:this.user.auth,
                            score:this.user.score,
                            sex:this.user.sex
                }}">
                            <span style="font-size: 16px;color: #333333">{{user.userName}}</span>
                        </router-link>

            </div>

        </div>

      </div>
<!--      我的订单-->
    <van-cell-group>
        <van-cell
                title="我的订单"
                value="查看所有订单"
                is-link
                icon="label"
                @click="$router.push({path:'/dashboard/mine/mineOrder' })"
        />
        <!--                @click="$router.push({path:'/dashboard/mine/mineOrder'})"-->
    </van-cell-group>
<!--      订单模块-->
      <router-link tag="div" to="/dashboard/mine/mineOrder">
          <van-grid>
              <van-grid-item
                      v-for="(order,index) in orderData"
                      :key="index"
                      :icon="order.icon"
                      :text="order.title"/>
          </van-grid>
      </router-link>

      <!--我的优惠券、我的收货地址-->
      <van-cell-group style="margin-top: 0.6rem">
          <van-cell title="我的优惠券" is-link icon="gold-coin" @click="$router.push({path:'/dashboard/mine/myCoupons'})" />
          <van-cell title="我的收货地址" is-link icon="todo-list"  @click="$router.push({path:'/dashboard/mine/myAddress'})"/>
      </van-cell-group>

      <!--联系客服、意见反馈-->
      <van-cell-group style="margin-top: 0.6rem">
          <van-cell title="联系客服" value="客服时间 07:00-22:00" is-link icon="phone"/>

          <van-cell title="意见反馈" is-link icon="smile-comment" @click="$router.push({path:'/dashboard/mine/feedback'})"/>
      </van-cell-group>

      <!--fanky-->
      <van-cell-group style="margin-top: 0.6rem">
          <van-cell title="fanky" value="下载APP体验更加" is-link icon="gift-card"/>
      </van-cell-group>





      <!--路由出口-->
      <transition name="router-slider" mode="out-in">
          <router-view></router-view>
      </transition>

  </div>

</template>








<script>


import {getMineMessage} from "@/api/api";
import img from "@/api/api"
export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Mine",
  created() {
    getMineMessage().then((resp)=>{
      this.user = resp.data.data.userinfo[0]
    })
  },
  data() {
        return {
            orderData: [
                {title: '待支付', icon: 'cart-circle-o'},
                {title: '待收货', icon: 'gift-o'},
                {title: '待评价', icon: 'smile-comment-o'},
                {title: '售后/退款', icon: 'cash-back-record'}
            ],
            user:{id:"",
                userName:"",
                account:"",
                headImage:null,
                phone:"",
                email:null,
                auth:null,
                score:null,
                sex:""},
          baseURL1:img.src,
        }
    },
    methods:{

        onClickRight(){
            this.$router.push({path:'/dashboard/mine/appAbout'})
        }

    },
}

</script>

<style scoped>
    #mine {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
    }

    .router-slider-enter-active, .router-slider-leave-active {
        transition: all 0.3s;
    }

    .router-slider-enter, .router-slider-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }


</style>
